<template>
	<div>
		<div class="userinfo">
			<div class="userinfo-avatar"><img src="/img/avatar.4494820.png"></div>
			<div class="font-14 pt-2">状态：住院</div>
			<div class="font-14 pt-2">科室：内分泌科</div>
			<div class="font-14 pt-2">床号：11</div>
			<div class="font-14 pt-2">家族史：</div>
			<div class="flex pt-2">
				<el-button size="small">全部资料</el-button>
				<el-button size="small">打印条码</el-button>
			</div>
			<div class="flex pt-1">
				<el-button size="small">办理转诊</el-button>
				<el-button size="small">办理出院</el-button>
			</div>
		</div>
		<div style="padding-left: 200px;min-height: 70vh;">
			<div class="flex flex-between items-center">
				<div style="font-weight: 800;">患者资料</div>
				<div>
					<el-button size="small" @click="editUserInfo">编辑</el-button>
				</div>
			</div>
			<div style="color: #4a4a4a;">
				<el-row class="pt-3">
					<el-col :span="12">
						<div class="font-14">住院号：12123</div>
					</el-col>
					<el-col :span="12">
						<div class="font-14">姓名：张三</div>
					</el-col>
				</el-row>
				<el-row class="pt-3">
					<el-col :span="12">
						<div class="font-14">性别：男</div>
					</el-col>
					<el-col :span="12">
						<div class="font-14">年龄：64岁</div>
					</el-col>
				</el-row>
				<el-row class="pt-3">
					<el-col :span="12">
						<div class="font-14">状态：住院</div>
					</el-col>
					<el-col :span="12">
						<div class="font-14">手机号：15727841234</div>
					</el-col>
				</el-row>
				<el-row class="pt-3">
					<el-col :span="12">
						<div class="font-14">科室：系统科室</div>
					</el-col>
					<el-col :span="12">
						<div class="font-14">住院时间：156天</div>
					</el-col>
				</el-row>
				<el-row class="pt-3">
					<el-col :span="12">
						<div class="font-14">责任医生：李四</div>
					</el-col>
					<el-col :span="12">
						<div class="font-14">责任护士：南区4</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 编辑患者 -->
		<el-dialog title="编辑患者" :visible.sync="editUserInfoDialogVisible" width="780px">
			<div class="dialog-body">
				<el-form label-position="right" label-width="100px">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="住院号" prop="name" v-model="editUserInfoForm.account">
								<el-input></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="手机号" prop="name">
								<el-input v-model="editUserInfoForm.username"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="姓名" prop="name">
								<el-input v-model="editUserInfoForm.phone"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="性别" prop="name">
								<el-radio-group v-model="radio">
									<el-radio :label="3">男</el-radio>
									<el-radio :label="6">女</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="出生日期" prop="name">
								<el-date-picker class="w-full" v-model="value1" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="科室" prop="name" v-model="editUserInfoForm.autograph">
								<el-select v-model="editUserInfoForm.department" placeholder="请选择" disabled="">
									<el-option v-for="item in [
										 {
										    value: '选项1',
										    label: '系统科室'
										}
									  ]" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="状态" prop="name" v-model="editUserInfoForm.department">
								<el-select v-model="editUserInfoForm.status" placeholder="请选择" disabled="">
									<el-option v-for="item in [
										 {
										    value: '选项1',
										    label: '系统科室'
										}
									  ]" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="责任医生" prop="name">
								<el-select v-model="editUserInfoForm.doctor" placeholder="请选择" disabled="">
									<el-option v-for="item in [
										 {
										    value: '选项1',
										    label: '系统科室'
										}
									  ]" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="责任护士" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="床号" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="入院时间" prop="name">
								<el-date-picker
									class="w-full"
								      v-model="value1"
								      type="datetime"
								      placeholder="选择日期时间">
								    </el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="出院时间" prop="name">
								<el-date-picker
									class="w-full"
								      v-model="value1"
								      type="datetime"
								      placeholder="选择日期时间">
								    </el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="糖尿病类型" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="诊断时间" prop="name">
								<el-date-picker
								class="w-full"
								      v-model="value1"
								      type="date"
								      placeholder="选择日期">
								    </el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="入院诊断" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="出院诊断" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="新生儿" prop="name">
								<el-radio-group v-model="editUserInfoForm.nurse">
									<el-radio :label="3">是</el-radio>
									<el-radio :label="6">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="婚姻状况" prop="name">
								<el-radio-group v-model="editUserInfoForm.marriage">
									<el-radio :label="3">已婚</el-radio>
									<el-radio :label="6">未婚</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="家族史" prop="name">
								<el-radio-group v-model="editUserInfoForm.family_history">
									<el-radio :label="3">是</el-radio>
									<el-radio :label="6">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="是否吸烟" prop="name">
								<el-radio-group v-model="editUserInfoForm.smoke">
									<el-radio :label="3">是</el-radio>
									<el-radio :label="6">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="是否饮酒" prop="name">
								<el-radio-group v-model="editUserInfoForm.drink_wine">
									<el-radio :label="3">是</el-radio>
									<el-radio :label="6">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="身份证件类型" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="身份证号号码" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="医保类型" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="医保卡" prop="name">
								<el-radio-group v-model="editUserInfoForm.drink_wine">
									<el-radio :label="3">医保</el-radio>
									<el-radio :label="6">自费</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="健康卡卡号" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="家属手机号" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col>
							<el-form-item label="户籍住址" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col>
							<el-form-item label="住址" prop="name">
								<el-input></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col>
							<el-form-item label="备注" prop="name">
								<el-input type="textarea"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<span slot="footer">
				<div class="text-left">
					<el-button type="primary" size="small" @click="editUserInfoDialogVisible = false">提交</el-button>
					<el-button type="danger" size="small" @click="editUserInfoDialogVisible = false">删除</el-button>
					<el-button size="small" @click="editUserInfoDialogVisible = false">取消</el-button>
				</div>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				editUserInfoForm: {
					inpatient_number: 1, //住院号
					phone: 15727547121, //手机号
					name: '大脚', //姓名
					sex: '男', //性别
					birthday: '', //生日
					department: '系统科室', //科室
					status: "良好", //状态
					doctor: '张三', //责任医生,
					nurse: '石榴姐', //护士
					bed_number: '无床号', //床号
					admission_time: '2021-12-12', //入院时间
					leave_hospital_time: '', //出院时间
					admission_diagnosis_time: '2021-12-12', //入院时间诊断
					leave_hospital_diagnosis_time: '2021-12-12', //出院时间诊断
					newborn: '是', //是否为新生儿
					marriage: '已婚', //婚姻状况
					family_history: '是', //家族史
					smoke: '', //是否吸烟
					drink_wine: '是', //是否饮酒
					id_card_type: '', //身份证类型
					id_card_number: '', //身份证号码
					insurance_type: '', //医保类型
					insurance_card: '', //医保卡
					Health_card_number: '110110', //健康卡卡号
					family_phone: '', //家属手机号
					permanent_address: '', //户籍地址
					address: '', //住址
					remarks: '' //备注
				},
				editUserInfoDialogVisible: true
			}
		},
		methods: {
			// 编辑用户信息
			editUserInfo(userInfo) {
				this.editUserInfoForm = Object.assign({}, userInfo);
				this.editUserInfoDialogVisible = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userinfo {
		width: 180px;
		z-index: 2;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		border-right: 1px solid #e6e6e6;

		.userinfo-avatar {
			height: 96px;
			width: 96px;
			margin: auto;
			margin-top: 30px;
			;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.dialog-body {
		max-height: 50vh;
		overflow-y: scroll;
		overflow-x: hidden;
		padding-right: 50px;;
	}

	::v-deep .el-dialog__footer {
		padding: 0 !important;
	}
</style>
